<script setup lang="ts">
import {Loading} from '@element-plus/icons-vue'
import {ImportResultVO, Result} from "~/api/responseResult";
import {batchDeleteData, download, getImportProgress} from "~/api/warehouse";
import {ElMessage} from "element-plus";

const props = defineProps<{ importPid: string }>()

let state: {importResultVO: ImportResultVO, loading: boolean} = reactive({
  importResultVO: {
    // 导入进度
    importProgress: '',
    // 导入状态
    importState: '',
    // 导入方式
    importMode: '',
    // 原始文件
    originalFileUrl: '',
    // s3key
    s3Key: '',
    // 文件类型
    fileType: '',
    // 当前导入的sheet
    sheetName: '',
    // 当前导入进行至的条数
    currentNumber: 0,
    // 文件数据量
    dataQuantity: 0,
    // 无效的数据量
    invalidDataQuantity: 0,
    // 重复的数据量
    repetitiveDataQuantity: 0,
    // 未匹配的数据量
    mismatchDataQuantity: 0,
    // 新增的数据量
    addDataQuantity: 0,
    // 修改的数据量
    updateDataQuantity: 0,
    // 失败的数据文件
    unsuccessfulFileUrl: '',
    // 删除状态
    dataDel: true,
  },
  loading: false

})

const initImportResultVO = async () => {
  if ( state.importResultVO.importState !== 'IMPORTED') {
    const res: Result<ImportResultVO> = await getImportProgress({importPid: props.importPid})
    if (res.success) {
      state.importResultVO = res.data
    } else {
      clearInterval(timer);
    }
  } else {
    clearInterval(timer);
  }
}

const getImportProgressRequest = async () => {
  const res: Result<ImportResultVO> = await getImportProgress({importPid: props.importPid})
  if (res.success) {
    state.importResultVO = res.data
  }
}


onBeforeMount( async () => {
  await initImportResultVO()
})
onBeforeUnmount( () => {
  clearInterval(timer);
  console.log("卸载了")
})


const timer = setInterval(initImportResultVO, 1000);

const exportDataFailed = () => {
  download({s3Key: state.importResultVO.unsuccessfulFileUrl})
}
const exportOriginalDocument = () => {
  download({s3Key: state.importResultVO.s3Key})
}
const batchDelete = async () => {
  state.loading = true
  const res:Result<any> = await batchDeleteData({importPid: props.importPid})
  if (res.success) {
    ElMessage.success({
      message: '删除成功',
      duration: 2 * 1000
    })
    await getImportProgressRequest()
    state.loading = false
  }
}

defineExpose({
  props,
  Loading,
  state,
  exportDataFailed,
  exportOriginalDocument,
  batchDelete
})
</script>
<template>

  <el-card v-if="state.importResultVO.importState === 'UPLOADING'" style="height:calc(100vh - 102px);">
    <div style="text-align: center; margin: 200px 200px 200px 200px">
      <div>
        <h1 style="font-size: 30px;">
          文件读取中
          <el-icon class="is-loading">
            <loading/>
          </el-icon>
        </h1>

      </div>
      <div style="margin-top: 50px">
        <div style="margin: 10px;">正在读取文件</div>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="0"/>
      </div>
    </div>
  </el-card>

  <el-card v-if="state.importResultVO.importState === 'IMPORTING'" style="height:calc(100vh - 102px);">
    <div style="text-align: center; margin: 200px 200px 200px 200px">
      <div>
        <h1 style="font-size: 30px;">
          执行中
          <el-icon class="is-loading">
            <loading/>
          </el-icon>
        </h1>

      </div>
      <div style="margin-top: 50px">
        <div style="margin: 10px;">正在导入数据({{state.importResultVO.currentNumber + "/大约总行数：" + state.importResultVO.dataQuantity}})</div>
        <el-progress :text-inside="true" :stroke-width="26" :percentage="state.importResultVO.importProgress"/>
      </div>
    </div>
  </el-card>

  <el-card v-loading="state.loading" v-if="state.importResultVO.importState === 'IMPORTED'" style="height:calc(100vh - 102px);">
    <div style="text-align: center; margin: 200px 200px 200px 200px">
      <div>
        <h1 style="font-size: 30px;">
          已完成
        </h1>
      </div>
      <div style="text-align: left;margin: 20px 300px 200px 300px;">
        <h1 style="font-size: 20px;">
          执行明细如下：
        </h1>
        <div style="margin-left: 50px">
<!--          <div>-->
<!--            <span>导入方式：{{state.importResultVO.importMode == 'ADD' ? '仅新增' : (state.importResultVO.importMode == 'ADD_UPDATE' ? '新增及更新本人' : '仅更新本人')}}</span>-->
<!--          </div>-->
          <div>
            <span>导入文档中数据共</span>
            <el-link style="font-weight: 700;">{{ state.importResultVO.dataQuantity }}</el-link>
            <span>条，</span>
            <el-link @click="exportOriginalDocument">点击导出原文档</el-link>
          </div>
          <div>
            <span>无效或格式异常数据 </span>
            <el-link v-if="state.importResultVO.invalidDataQuantity === 0">{{ state.importResultVO.invalidDataQuantity }}</el-link>
            <el-link v-else style="font-weight: 700;color: #FF0000;">{{ state.importResultVO.invalidDataQuantity }}</el-link>
            <span>条，</span>
            <span>重复数据</span>
            <el-link v-if="state.importResultVO.repetitiveDataQuantity === 0">{{ state.importResultVO.repetitiveDataQuantity }}</el-link>
            <el-link v-else style="font-weight: 700;color: #FF0000;">{{ state.importResultVO.repetitiveDataQuantity }}</el-link>
            <span >条，</span>
            <span>未匹配数据</span>
            <el-link v-if="state.importResultVO.mismatchDataQuantity === 0">{{ state.importResultVO.mismatchDataQuantity }}</el-link>
            <el-link v-else style="font-weight: 700;color: #FF0000;">{{ state.importResultVO.mismatchDataQuantity }}</el-link>
            <span>条，</span>
            <el-link @click="exportDataFailed">点击导出失败数据</el-link>
          </div>
          <div>
            <span>新增数据</span>
            <el-link v-if="state.importResultVO.addDataQuantity === 0">{{ state.importResultVO.addDataQuantity }}</el-link>
            <el-link v-else style="font-weight: 700;color: #008000;">{{ state.importResultVO.addDataQuantity }}</el-link>
            <span>条，</span>

            <span>更新数据</span>
            <el-link v-if="state.importResultVO.updateDataQuantity === 0">{{ state.importResultVO.updateDataQuantity }}</el-link>
            <el-link v-else style="font-weight: 700;color: #3366FF;">{{ state.importResultVO.updateDataQuantity }}</el-link>
            <span>条，</span>
            <el-link v-if="!state.importResultVO.dataDel" @click="batchDelete">点击批量删除</el-link>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
</style>

<route lang="yaml">
meta:
  layout: home
</route>
